<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<%@include file="/common/taglibs.jsp"%>
<%@include file="/common/javascript.jsp"%>
<html xmlns="http://www.w3.org/1999/xhtml" id="teacherForm">
<head>
<title>教材上传</title> 
<!-- 
<link rel="stylesheet" href="${ctx}/static/ztree/css/demo.css" type="text/css" />
<link rel="stylesheet" href="${ctx}/static/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css" />
 -->
<script type="text/javascript">
    var mainform;
    var viewType = "${viewType}";
	var zNodes;
	var setting = {
			check: {enable: true,chkStyle: "radio",radioType: "all"},
			view: {selectedMulti: false,dblClickExpand: false},
			data: {simpleData: {enable: true}},
			callback: {onClick: onClick,onCheck: onCheck}
	};

	$.ajax({
	   type: "POST",
	   url: "${ctx}/qso/material/courseJson",
	   cache: true,
	   async:false,
	   dataType:'json',
	   success: function(result){
		   if (typeof(result)== "string") {
			   result = eval("(" + result + ")");
		   }
		   zNodes=result;
	   }
	});
	
    $(function (){
		$.fn.zTree.init($("#treeDemo"),setting,zNodes);
	
		var fileNum=1;
		if(viewType == "add"){
			fileNum=999999;
		}else{
			fileNum=1;
		}
		$('#materialFileUpload').uploadify({
    		formData : {
    			"jsessionid": "<%=request.getSession().getId()%>"
			}, 
   	        swf      : '${ctx}/static/uploadify/uploadify.swf',
   	        uploader : '${ctx}/qso/material/upload',
   	        width: 100,
   			height:22,
   			multi: true,
   			auto: false,
   			fileObjName: 'attachment',
   			fileTypeExts: '*.*',
   			fileSizeLimit: '100GB',
   			checkExisting: true,
   			method: 'post',  
   			removeCompleted : false,
   			buttonText:'浏览',
   			queue2Limit: fileNum,
   			displayData: 'percentage',
   			queueID:'material-queue',
   			cancelImg: '${ctx}/static/uploadify/uploadify-cancel.png', 
   			onUploadSuccess : function(file, data, response){
   				 //$("#material-info").append("文件" + file.name + "上传成功！<br/>");
   			},
   			onQueueComplete: function() {
   				 //$("#material-info").append("文件全部上传成功！<br/>"); 
   			},
   			onUploadError : function(file, errorCode, errorMsg){
   				 if(errorCode == -200){
   					 $("#material-info").append("文件" + file.name + "大小超过最大限制200G！<br/>");
   				 }
   				 //$("#material-info").append("文件" + file.name + "上传失败！<br/>");
   			}
   	    });
    	 
    	$('#materialStart').bind('click', function() {
    		$('#materialFileUpload').uploadify('upload','*');
    	});
    	
        mainform=$("#mainform");
        
        mainform.ligerForm();
         
     	$("#id").attr("readonly", "readonly").removeAttr("validate"); 
        $("#parentName").attr("readonly", "readonly");
		 
        $.metadata.setType("attr", "validate");
        LG.validate(mainform); 
        
		$("#parentName").focus(function(event){
			showMenu(event);
		});
		
        //渲染按钮
        LG.setFormDefaultBtn(cancel, viewType == "detail" ? null : save);
    });

    function save(){
        LG.submitForm(mainform, function (result) {
        	if(typeof(result)=="string"){
        		result=eval("("+result+")");
        	}
            if (!result.success) {
                LG.showError('错误:' + result.message);
            }
            else { 
                LG.showSuccess('保存成功', function () { 
                   LG.callParent("stuList");
                });
            }
        });
    }
    
    function cancel(){
        var win = window.parent || window;
        if(win.dialog){
        	win.dialog.close();
        }
    }
	
	function onClick(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		zTree.checkNode(treeNode, !treeNode.checked, null, true);
		return false;
	}

	function onCheck(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		var nodes = zTree.getCheckedNodes(true);
		if (nodes.length>0) {
			$("#parentId").val(nodes[0].id);
			$("#parentName").val(nodes[0].name);
		}
		hideMenu();
	}

	function showMenu(event) {
		var obj = $("#parentName");
		var offset = $("#parentName").offset();
		$("#menuContent").css({left:offset.left + "px", top:offset.top + obj.outerHeight() + "px"}).slideDown("fast");
		$("body").bind("mousedown", onBodyDown);
	}
	
	function hideMenu() {
		$("#menuContent").fadeOut("fast");
		$("body").unbind("mousedown", onBodyDown);
	}
	
	function onBodyDown(event) {
		if (!(event.target.id == "menuBtn" || event.target.id == "parentName" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
			hideMenu();
		}
	}
	
	function deleteMaterialD(id){
		$.ajax({
			type: "POST",
		   	url: '${ctx}/qso/material/deleteMaterialD?id='+id,
		   	success: function(result){
				if(result=='true'){
					$("#deFile").remove();
					$("#upFile").css("display","block");
				}
		   	}
		});
	}
 </script>
</head>

<body>
	<form name="mainform" method="post" id="mainform" action="${ctx}/qso/material/save">
		<input type="hidden" name="viewType" value="${viewType}" />
		<table cellpadding="0" cellspacing="0" class="l-table-edit" style="width: 95%; margin-top:10px; margin-left:30px;">
			<tr>
                <td align="right" class="l-table-edit-td" >教材代码:</td>
                <td align="left" class="l-table-edit-td"  style="width:150px;">
                	${command.id}
                	<input name="id" type="hidden" id="id" value="${command.id}" ltype="text" />
                </td>
            </tr> 
			<tr>
				<td align="right" class="l-table-edit-td">课程名称:</td>
				<td align="left" class="l-table-edit-td" colspan="3">
					<select style="width: 180px" name="couid" id="couid" ltype="select" validate="{required:true}" <c:if test="${viewType=='detail'}">disabled="disabled"</c:if>>
                	 	<c:forEach items="${courses}" var="course">
                	 		<c:choose>
                	 			<c:when test="${command.couid.title eq course.title}">
                	 				<option value="${course.id}" selected="selected">${course.title}</option>
                	 			</c:when>
                	 			<c:otherwise>
                	 				<option value="${course.id}">${course.title}</option>
                	 			</c:otherwise>
                	 		</c:choose>
                	 	</c:forEach>
                	 </select>    
				</td>
<!-- 				<td align="right" class="l-table-edit-td">上一级ID:</td> -->
<!-- 				<td align="left" class="l-table-edit-td" colspan="4"> -->
<%-- 					<input type="hidden" name="parentId" id="parentId" value="${parent.id} }"/>  --%>
<%-- 					<input id="parentName" name="parentName" type="text" ltype="text" value="${parent.title}" validate="{required:true,notnull:true}"/> --%>
<!-- 				</td> -->
			</tr>
			<tr>
				<td align="right" class="l-table-edit-td" valign="top">选择附件:</td>
				<td align="left" class="l-table-edit-td" colspan="3">
					<c:if test="${not empty materialD.path}">
						<div id="deFile" class="l-table-edit-td">
						<c:choose>
							<c:when test="${'detail' eq viewType}">
							${materialD.path}
							</c:when>
							<c:otherwise>
							${materialD.path} <a onclick="deleteMaterialD('${materialD.id}');">删除</a>
							</c:otherwise>
						</c:choose>
						</div>
					</c:if>
					<div id="upFile" <c:if test="${not empty materialD.path}">style="display:none" </c:if> >
					
           			<input type="file" id="materialFileUpload" name="materialFileUpload" > </input>
           			<div id="material-queue" style="max-width:350px;width:350px;"></div>
           			<div id="material-info"></div>
           			<div id="btnCon">
  						<input type="button" id="materialStart" name="materialStart" value="开始上传" style="margin-left:auto;margin-right: auto;"/>
  					</div>
				</td>
			</tr>
			<tr>
				<td align="right" class="l-table-edit-td">教材介绍:</td>
				<td align="left" class="l-table-edit-td" colspan="3">
					<textarea cols="100" rows="10" class="l-textarea" id="materialIntro" name="materialIntro" style="width: 480px">${materialD.intro}</textarea>
				</td>
				<td align="left"></td>
			</tr> 
		</table>
	</form>
	<div style="height:80px"></div>
	<div id="menuContent" class="menuContent" style="display: none; position: absolute;">
		<ul id="treeDemo" class="ztree" style="margin-top: 0; width: 170px; height: 300px;"></ul>
	</div>
</body>
</html>
